---
type: tutorial
title: Crea un componente de navegación reutilizable
i18nReady: true
description: |-
  Tutorial: Crea tu primer blog con Astro —
  Sustituye elementos repetidos en varias páginas por un componente reutilizable
---
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

Ahora que tienes el mismo HTML escrito en varias páginas de tu sitio de Astro, ¡es hora de sustituir ese contenido duplicado por un componente de Astro reutilizable!

<PreCheck>
  - Crear una nueva carpeta para los componentes
  - Crear un componente Astro para mostrar tus enlaces de navegación
  - Sustituir el HTML existente por un nuevo componente de navegación reutilizable
</PreCheck>

## Crea una nueva carpeta `src/components/`.

Para guardar los archivos `.astro` que generarán HTML pero que no se convertirán en nuevas páginas de tu sitio web, necesitarás una nueva carpeta en tu proyecto: `src/components/`. 


## Crea un componente de navegación


<Steps>
1. Crea un nuevo archivo: `src/components/Navigation.astro`.

2. Copia tus enlaces para navegar entre páginas desde la parte superior de cualquier página y pégalos en tu nuevo archivo, `Navigation.astro`:

    ```astro title="src/components/Navigation.astro" "---"
    ---
    ---
    <a href="/">Inicio</a>
    <a href="/about/">Sobre mi</a>
    <a href="/blog/">Blog</a>
    ```
    :::tip
    Si no hay nada en el frontmatter de tu archivo `.astro`, no es necesario que escribas los bloques de código. Siempre puedes volver a agregarlos cuando los necesites.
    :::
</Steps>

### Importa y utiliza Navigation.astro

<Steps>
1. Vuelve a `index.astro` e importa tu nuevo componente dentro del bloque de código:

    ```astro title="src/pages/index.astro" ins={2}
    ---
    import Navigation from '../components/Navigation.astro';
    import "../styles/global.css";

    const pageTitle = "Home Page";
    ---
    ```

2. A continuación, sustituye los elementos de enlace HTML de navegación existentes por el nuevo componente de navegación que acabas de importar:

    ```astro title="src/pages/index.astro" del={1-3} ins={4}
    <a href="/">Inicio</a>
    <a href="/about/">Sobre mi</a>
    <a href="/blog/">Blog</a>
    <Navigation />
    ```

3. Comprueba la vista previa en tu navegador y observa que debería tener exactamente el mismo aspecto... ¡y es lo que quieres! 
</Steps>

Tu sitio contiene el mismo HTML que antes. Pero ahora, esas tres líneas de código son proporcionadas por tu componente `<Navigation />`. 

<Box icon="puzzle-piece">

## Pruébalo tu mismo - Añade navegación al resto de tu sitio web

Importa y utiliza el componente `<Navigation />` en las otras dos páginas de tu sitio (`about.astro` y `blog.astro`) utilizando el mismo método.

No olvides
- Añadir una sentencia import en la parte superior del script del componente, dentro de la valla de código.
- Sustituir el código existente por el componente de navegación.

</Box>

:::note
Cuando reestructuras tu código pero no cambias el aspecto de tu página en el navegador, estás **refactorizando**. En esta unidad **refactorizarás** varias veces a medida que reemplaces partes del HTML de tu página por componentes. 

Esto te permite empezar rápidamente con cualquier código de trabajo, a menudo duplicado a lo largo de tu proyecto. A continuación, puedes mejorar el diseño de tu código existente de forma incremental sin cambiar la apariencia externa de tu sitio.
:::



<Box icon="question-mark">

### Pon a prueba tus conocimientos



1. Puedes hacerlo cuando tengas elementos repetidos en varias páginas:
    <MultipleChoice>
      <Option>
        reiniciar el servidor dev
      </Option>
      <Option isCorrect>
        refactorizar para utilizar un componente reutilizable
      </Option>
      <Option>
        crear una nueva página
      </Option>
    </MultipleChoice>

2. Los componentes Astro son:
    <MultipleChoice>
      <Option>
        reutilizables
      </Option>
      <Option>
        fragmentos de HTML
      </Option>
      <Option isCorrect>
        ambas cosas.
      </Option>
    </MultipleChoice>

3. Los componentes Astro crearán automáticamente una nueva página en tu sitio cuando...
    <MultipleChoice>
      <Option>
        incluyes `<html></html>`
      </Option>
      <Option>
        refactorizas
      </Option>
      <Option isCorrect>
        pones el fichero `.astro` dentro de `src/pages/`
      </Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">

## Checklist

<Checklist>
- [ ] Puedo refactorizar contenidos en componentes reutilizables.
- [ ] Puedo añadir un nuevo componente a una página `.astro`.
</Checklist>

</Box>

### Recursos

- [Visión general de los componentes Astro](/es/basics/astro-components/)

- [Refactorización](https://refactoring.com/) <Badge class="neutral-badge" text="externo" />
